import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Button, message, Steps } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import styled from '../task_listing.less';
import ListingDeviceList from '../components/ListingDeviceList';

const Step = Steps.Step;

interface Props extends FormComponentProps {
  dispatch?: Function,
    data?: {
      id: number
    },
  details?: any,
  match: {
    params: {
      id: number
    }
  }
}

@connect(({ task_listing }) => ({
  details: task_listing.details
}))
class FormItem extends Component<Props, any> {
  state = {
    index: 1,
    detData: {
      id: '',
      createTime: '',
      beginTime: '',
      endTime: '',
      name: '',
      typeName: '',
      resTypeName: '',
      statusName: ''
    },
    taskId: ''
  };

  componentWillMount() {
    let hasMsg = message.loading('');
    const { dispatch, match } = this.props;
    const { params } = match;
    this.setState({
      taskId: params.id
    });
    dispatch({
      type: 'task_listing/queryInfoById',
      payload: params.id
    }).then(() => {
      const { details } = this.props;
      if(details) {
        this.setState({
          detData: details,
          index: +details.status
        }, hasMsg)
      }
    })
  }

  render() {
    return (
      <div>
        <div className="rules-head">
          <h5 style={{'fontSize': '16px', 'marginBottom': '30px'}}>任务编号：{this.state.detData.id}</h5>
          <Steps size="small" current={this.state.index - 1}>
            <Step title="创建" description={this.state.detData.createTime} />
            <Step title="发布" description={this.state.detData.beginTime} />
            <Step title="处理" />
            <Step title="停用" />
            <Step title="完成" />
          </Steps>
        </div>
        <div style={{'marginTop': '30px', 'borderTop': '1px solid #ccc', 'paddingTop': '20px'}}>
          <div className={styled.task_listing_ul}>
            <h5 style={{'fontSize': '16px'}}>基本信息</h5>
            <ul className="task-ul">
              <li className="task-li">
                <p>任务名称：{this.state.detData.name}</p>
                <p>任务编号：{this.state.detData.id}</p>
                <p>任务类型：{this.state.detData.typeName}</p>
              </li>
              <li className="task-li">
                <p>资源类型：{this.state.detData.resTypeName}</p>
                <p>状态：{this.state.detData.statusName}</p>
                <p>创建时间：{this.state.detData.createTime ? this.state.detData.createTime.slice(0, 10) : ''}</p>
              </li>
              <li className="task-li">
                <p>开始时间：{this.state.detData.beginTime ? this.state.detData.beginTime.slice(0, 10) : ''}</p>
                <p>结束时间：{this.state.detData.endTime ? this.state.detData.endTime.slice(0, 10) : ''}</p>
              </li>
            </ul>
          </div>
          <div>
            <h5 style={{'fontSize': '16px', 'marginBottom': '20px'}}>设备清单（列表）</h5>
            <div>
              <ListingDeviceList id={this.state.taskId}/>
            </div>
          </div>
        </div>
        <div className="foo" style={{'marginTop': '10px', 'paddingLeft': '50px'}}>
          <Button onClick={() => {
            window.history.go(-1);
          }}>返回</Button>
        </div>
      </div>
    );
  }
}

const FormList = Form.create()(FormItem);
export default FormList;
